import 'package:flutter/material.dart';
import 'package:gold/model/shop_commission_model.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/ui/my/shop/commission/commission_details_viewmodel.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_text.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

/// @description: 提成明细
/// @author tangzhentao
/// @created at 21:32 2024/12/10

class CommissionDetailsPage extends StatelessWidget {
  const CommissionDetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<CommissionDetailsViewmodel>(
        appBar: (_) => xfgAppbar(title: '提成明细'),
        onInit: (data) => data.loadFirst(),
        model: CommissionDetailsViewmodel(),
        toplessBuilder: (ctx, details) => Column(
          children: [
            /// 明细资料
            Container(
              margin: EdgeInsets.only(top: XfgSize().size20),
              height: XfgSize().size198,
              width: XfgSize().size355,
              decoration: const BoxDecoration(image: DecorationImage(image: AssetImage(Res.imagesCommissionDetails), fit: BoxFit.cover)),
              child: Builder(builder: (con) {
                final commission = con.select<CommissionDetailsViewmodel, ShopCommissionModel>((k) => k.shopCommission);
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: XfgSize().size30, top: XfgSize().size16),
                      child: XfgText('累计提成', fontSize: XfgSize().text16, color: XfgColor.white),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: XfgSize().size30, top: XfgSize().size16),
                      child: XfgText(commission.total?.toString()?? '0', fontSize: XfgSize().text32, color: XfgColor.white, bold: FontWeight.bold),
                    ),
                    Container(
                      width: XfgSize().size300,
                      height: XfgSize().size24,
                      margin: EdgeInsets.only(left: XfgSize().size30, top: XfgSize().size18),
                      padding: EdgeInsets.symmetric(horizontal: XfgSize().size12),
                      decoration: BoxDecoration(color: XfgColor.integralDetailTipBg, borderRadius: BorderRadius.circular(XfgSize().size24)),
                      child: Row(
                        children: [
                          Icon(Icons.alarm_on_outlined, size: XfgSize().size16, color: XfgColor.integralDetailTip),
                          XfgText('  确认收货后提成才能入账', fontSize: XfgSize().text12, color: XfgColor.white)
                        ],
                      ),
                    ),
                    Expanded(
                        child: Row(
                          children: [
                            _dataItemWidget('今日提成', commission.today?.toString()?? '0'),
                            _dataItemWidget('昨日提成', commission.yesterday?.toString()?? '0'),
                            _dataItemWidget('本月提成', commission.month?.toString()?? '0'),
                          ],
                        )
                    )
                  ],
                );
              }),
            ),
            /// 提成类型
            Container(
              padding: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size20, XfgSize().size10, XfgSize().size14),
              height: XfgSize().size77,
              child: Builder(builder: (ctx) {
                final status = ctx.select<CommissionDetailsViewmodel, String>((k) => k.status);
                return SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: [
                      _typeWidget('全部', CommissionStatus.all, status, details),
                      SizedBox(width: XfgSize().size10),
                      _typeWidget('即将到账', CommissionStatus.unsettle, status, details),
                      SizedBox(width: XfgSize().size10),
                      _typeWidget('已到账', CommissionStatus.settled, status, details),
                      SizedBox(width: XfgSize().size10),
                      _typeWidget('已取消', CommissionStatus.cancel, status, details),
                    ],
                  ),
                );
              }),
            )
          ],
        ),
        builder: (ctx, details) => SmartRefresher(
          controller: details.controller,
          enablePullUp: true,
          enablePullDown: true,
          onRefresh: details.refresh,
          onLoading: details.loadMore,
          child: ListView.builder(
            itemCount: details.list.length,
            itemBuilder: (_, index) {
              final model = details.list[index];
              final undo = model.status == CommissionStatus.unsettle;
              final isLast = details.list.length == index + 1;
              return Container(
                margin: EdgeInsets.fromLTRB(XfgSize().size10, 0, XfgSize().size10, isLast ? XfgSize().bottomBarHeight:XfgSize().size10),
                padding: EdgeInsets.fromLTRB(XfgSize().size12, XfgSize().size16, XfgSize().size16, XfgSize().size22),
                decoration: white6Decoration,
                child: Column(
                  children: [
                    Row(
                      children: [
                        Expanded(child:  XfgText('${model.order?.productName}（x${model.order?.quantity}）', fontSize: XfgSize().text18, color: XfgColor.text1)),
                        XfgText(_getStatusDesc(model.status), fontSize: XfgSize().text14, color: undo ? XfgColor.theme:XfgColor.text3, bold: FontWeight.w500),
                      ],
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Column(
                            children: [
                              _listItemInfoWidget('订单编号', model.order?.orderNo?? '--'),
                              _listItemInfoWidget('支付金额', '¥${model.order?.payPrice?.toStringAsFixed(2)?? '0.00'}'),
                              _listItemInfoWidget('客户信息', model.nickname?? '--'),
                              _listItemInfoWidget('下单时间', model.createdAt?? '--'),
                              _listItemInfoWidget('付款时间', model.settledAt?? '--')
                            ],
                          ),
                        ),
                        XfgText('+${model.amount?.toStringAsFixed(2)?? '0.00'}', fontSize: XfgSize().text20, color: XfgColor.integralPlus, bold: FontWeight.w600)
                      ],
                    )
                  ],
                ),
              );
            },
          ),
        )
    );
  }

  /// 数据通用布局
  Widget _dataItemWidget(String text, String value) => Expanded(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        XfgText(text, fontSize: XfgSize().text14, color: XfgColor.integralExpected),
        SizedBox(height: XfgSize().size12),
        XfgText(value, fontSize: XfgSize().text16, color: XfgColor.white),
      ],
    ),
  );

  /// 提成类型布局
  Widget _typeWidget(String text, String status, String select, CommissionDetailsViewmodel commission) => GestureDetector(
    onTap: () {
      if (select != status) {
        commission.status = status;
      }
    },
    child: Container(
      width: XfgSize().size30 + boundingTextSize(text, style: TextStyle(fontSize: XfgSize().text14)).width,
      height: XfgSize().size33,
      decoration: BoxDecoration(
          color: XfgColor.white,
          border: select == status ? Border.all(color: XfgColor.theme, width: XfgSize().size0_5):null,
          borderRadius: BorderRadius.circular(XfgSize().size33)
      ),
      alignment: Alignment.center,
      child: XfgText(text, fontSize: XfgSize().text14, color: select == status ? XfgColor.text1D:XfgColor.text2),
    ),
  );

  /// 列表信息通用布局
  Widget _listItemInfoWidget(String text, String value) => Container(
    margin: EdgeInsets.only(top: XfgSize().size14),
    child: Row(
      children: [
        SizedBox(width: XfgSize().size64, child: XfgText(text, fontSize: XfgSize().text12, color: XfgColor.text3)),
        Expanded(child: XfgText(value, fontSize: XfgSize().text12, color: XfgColor.text1D))
      ],
    ),
  );

  /// 获取提成状态描述
  String _getStatusDesc(String? status) {
    switch (status) {
      case CommissionStatus.settled:
        return '已结算';
      case CommissionStatus.cancel:
        return '已取消';
      default:
        return '待结算';
    }
  }
}
